<template>
  <div>
    <div class="search">
      <input v-model="keyword" class="search-input" placeholder="请输入城市名称或拼音">
    </div>
    <div class="search-concent" v-show="keyword" ref="cityDom">
      <ul>
        <li v-for="searchList of list" @click="cityClick(searchList.name)">{{searchList.name}}</li>
        <li v-show="!list.length" class="no-content">没有匹配到数据</li>
      </ul>
  </div>
  </div>
</template>

<script>
  import Bscoll from 'better-scroll'
  export default {
    name: "citySearch",
    props:{
      citys:Object
    },
    methods :{
      cityClick (city){
        this.$store.commit('changeNowCity',city)
        this.$router.push('/')
      }
    },
    mounted (){
      this.scroll = new Bscoll(this.$refs.cityDom)
    },
    data (){
      return {
        keyword:'',
        list:[],
        timer:null
      }
  },
    watch:{
      keyword (){
        if(this.timer){
          clearTimeout(this.timer)
        }
        this.timer = setTimeout(()=>{
          const result = []
          for( let i in this.citys){
            this.citys[i].forEach((vaule) =>{
              if(vaule.spell.indexOf(this.keyword)>-1||vaule.name.indexOf(this.keyword)>-1){
                result.push(vaule)
              }
            })
          }
          this.list = result
        },100)
      }
    }
  }
</script>

<style scoped lang="stylus">
  @import "~css/varibles.styl";
  .search{ height: .72rem;padding: 0 .1rem;background: #00bcd4}
  .search-input{ height: .62rem;width: 100%;padding:0 .1rem;color: #666;text-align: center;
    box-sizing: border-box;border-radius: .06rem}
  .search-concent{ position: absolute;top:1.58rem;left:0;right: 0;bottom: 0;background: #eee;z-index: 1;
    padding: 0.2rem 0rem;overflow: hidden}
  .search-concent li{ border: 1px solid #ddd;padding:0.2rem 0.2rem;width: 1.4rem;text-align: center;
    border-radius: .1rem;display: inline-block;margin-top: .1rem;margin-left:0.2rem;background: #fff;cursor: pointer}
  .no-content{ width: 100% !important;margin-left: 0 !important;padding: 0.2rem 0 !important;}
</style>
